<template>
  <div class="edit_container">
    <quill-editor
      v-model="editContent"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
    <div v-html="str" class="ql-editor">
      {{ str }}
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import VueQuillEditor, { Quill, quillEditor } from 'vue-quill-editor'
import imageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', imageResize)
export default {
  components: {
    quillEditor
  },
  props: {
    editContent: String
  },
  data() {
    return {
      // 实际的输入内容
      content: ``,
      // content: this.editContent,
      str: '',
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], //引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], //列表
            [{ script: 'sub' }, { script: 'super' }], // 上下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], //字体
            [{ align: [] }], //对齐方式
            ['clean'], //清除字体样式
            ['image', 'video'] //上传图片、上传视频
          ],
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          }
        }
      }
    }
  },
  created() {
    this.content = this.editContent
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  mounted() {
    //请求接口返回的内容字符串
    let content = ''
    this.str = this.escapeStringHtml(content)
  },
  methods: {
    // 准备编辑器
    onEditorReady(editor) {},

    // 失去焦点事件
    onEditorBlur() {},

    // 获得焦点事件
    onEditorFocus() {
      console.log(this.content, 'content')
      console.log(this.editContent, 'editContent')
    },

    // 内容改变事件
    onEditorChange() {
      // this.$emit('emitContent', this.content)
      // console.log(this.content)
      this.$emit('emitEditContent', this.content)
    },

    // 转码
    escapeStringHtml(str) {
      str = str.replace(/&lt;/g, '<')
      str = str.replace(/&gt;/g, '>')
      return str
    }
  }
}
</script>

<style scoped>
.edit_container {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 20px;
  background-color: azure;
}
.ql-editor {
  height: 300px;
}
</style>
